<!--
 * @Author: your name
 * @Date: 2021-12-17 13:25:01
 * @LastEditTime: 2021-12-17 18:51:23
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \12.14vue\my-app\src\components\Switch.vue
-->
/<template>
  <div>
    <input
      type="checkbox"
      :id="`switch+${name}`"
      class="switchInput"
      :checked="value"
      @input="changevalue"
    />
    <label :for="`switch+${name}`" class="switchLabel"></label>
  </div>
</template>

<script>
export default {
  props: ["name", "value"],
  methods: {
    changevalue(e) {
      this.$emit("input",e.target.checked*1)
        console.log(e.target.checked*1);
    },
  },
};
</script>

<style lang="scss" scoped>
.switchInput {
  display: none;
}
.switchLabel {
  width: 60px;
  height: 30px;
  border: 1px solid #ccc;
  display: inline-block;
  position: relative;
  border-radius: 15px;
}
.switchLabel::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background: #ccc;
  transition: all 0.5s;
}
.switchInput:checked + label::before {
  left: 100%;
  margin-left: -28px;
  background: blue;
  transition: all 0.5s;
}
</style>